<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购 - 商品类别管理</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="../css/default.min.css" />

		<!-- JS -->
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="../js/html/default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html/product-category.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!-- 导航条开始 -->
		<header class="navbar navbar-expand-md navbar-light bg-light">
			<nav class="container">
				<a href="../index.html" class="navbar-brand">
					<img src="../img/logo.png" alt="Happy Go" />
				</a>
				<a href="#navbar-menu1" data-toggle="collapse" class="navbar-toggler collapsed">
					<i class="navbar-toggler-icon"></i>
				</a>

				<div id="navbar-menu1" class="navbar-collapse collapse">
					<div class="navbar-text">
						<span>Admin，</span>
						<span>欢迎来到快乐购管理页面！&nbsp;</span>
					</div>

					<div class="ml-auto">
						<ul class="navbar-nav nav">
							<li class="nav-item">
								<a href="index.html" class="nav-link">管理首页</a>
							</li>
							<li class="nav-item dropdown">
								<a href="#" data-toggle="dropdown" class="nav-link active">
									<span>商品</span>
									<i class="dropdown-toggle"></i>
								</a>
								<div class="dropdown-menu">
									<a href="product-category.html" class="dropdown-item active">类别管理</a>
									<a href="product.html" class="dropdown-item">商品管理</a>
								</div>
							</li>
							<li class="nav-item">
								<a href="order.html" class="nav-link">订单</a>
							</li>
							<li class="nav-item">
								<a href="user.html" class="nav-link">用户</a>
							</li>
							<li class="nav-item">
								<a href="ads.html" class="nav-link">广告</a>
							</li>
							<li class="nav-item">
								<a href="../index.html" class="nav-link">购物首页</a>
							</li>
							<li class="nav-item">
								<a href="../login.html" class="nav-link">注销</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!-- //导航条结束 -->

		<!-- 页面主体部分 -->
		<section class="container mt-2">
			<div class="h4 border-bottom">
				<span>商品类别管理</span>
				<small class="float-right">
					<a href="#modal-add-category" class="btn btn-sm btn-outline-success py-0" data-toggle="modal">新增商品类别</a>
				</small>
			</div>

			<ul class="list-unstyled mt-3 product-category">
				<li class="bg-light mb-2 p-2 rounded">
					<a href="#category-1" data-toggle="collapse">
						<i class="glyphicon-th-large"></i>
						<span>女装/内衣</span>
						<i class="dropdown-toggle"></i>
					</a>
					<div class="float-right">
						<a href="#modal-edit-primary-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
						<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
					</div>

					<div id="category-1" class="collapse show active">
						<ul class="list-unstyled ml-4 mt-2">
							<li>
								<i class="glyphicon-th"></i>
								<label>毛呢外套</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
							<li>
								<i class="glyphicon-th"></i>
								<label>羽绒服</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
							<li>
								<i class="glyphicon-th"></i>
								<label>棉服</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
							<li>
								<i class="glyphicon-th"></i>
								<label>夹克</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
						</ul>
					</div>
				</li>

				<li class="bg-light mb-2 p-2 rounded">
					<a href="#category-2" data-toggle="collapse">
						<i class="glyphicon-th-large"></i>
						<span>男装/运动户外</span>
						<i class="dropdown-toggle"></i>
					</a>
					<div class="float-right">
						<a href="#modal-edit-primary-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
						<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
					</div>

					<div id="category-2" class="collapse collapsed">
						<ul class="list-unstyled ml-4 mt-2">
							<li>
								<i class="glyphicon-th"></i>
								<label>单西</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
							<li>
								<i class="glyphicon-th"></i>
								<label>棉衣</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
						</ul>
					</div>
				</li>

				<li class="bg-light mb-2 p-2 rounded">
					<a href="#category-3" data-toggle="collapse">
						<i class="glyphicon-th-large"></i>
						<span>女鞋/男鞋/箱包</span>
						<i class="dropdown-toggle"></i>
					</a>
					<div class="float-right">
						<a href="#modal-edit-primary-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
						<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
					</div>

					<div id="category-3" class="collapse collapsed">
						<ul class="list-unstyled ml-4 mt-2">
							<li>
								<i class="glyphicon-th"></i>
								<label>平底单鞋</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
							<li>
								<i class="glyphicon-th"></i>
								<label>高跟单鞋</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
						</ul>
					</div>
				</li>

				<li class="bg-light mb-2 p-2 rounded">
					<a href="#category-4" data-toggle="collapse">
						<i class="glyphicon-th-large"></i>
						<span>手机/数码/电脑办公</span>
						<i class="dropdown-toggle"></i>
					</a>
					<div class="float-right">
						<a href="#modal-edit-primary-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
						<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
					</div>

					<div id="category-4" class="collapse collapsed">
						<ul class="list-unstyled ml-4 mt-2">
							<li>
								<i class="glyphicon-th"></i>
								<label>笔记本</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
							<li>
								<i class="glyphicon-th"></i>
								<label>平板电脑</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
							<li>
								<i class="glyphicon-th"></i>
								<label>台式机</label>
								<div class="float-right">
									<a href="#modal-edit-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
									<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
								</div>
							</li>
						</ul>
					</div>
				</li>

				<li class="bg-light mb-2 p-2 rounded">
					<a href="#category-5" data-toggle="collapse">
						<i class="glyphicon-th-large"></i>
						<span>测试</span>
						<i class="dropdown-toggle"></i>
					</a>
					<div class="float-right">
						<a href="#modal-edit-primary-category" class="btn btn-sm btn-outline-info py-0" data-toggle="modal">修改</a>
						<a href="" class="btn btn-sm btn-outline-danger py-0" data-toggle="del">移除</a>
					</div>

					<div id="category-5" class="collapse collapsed">
						<span class="text-muted">暂无子分类</span>
					</div>
				</li>
			</ul>
		</section>

		<!-- 新增商品分类模态框部分 -->
		<div id="modal-add-category" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-th-list"></i>
							<span>新增商品类别</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-add-category" action="">
							<div class="form-group form-row pl-2">
								<div class="form-check-inline">
									<input id="ctype1" type="radio" name="ctype" value="hide" checked="checked" class="form-check-input" />
									<label for="ctype1" class="form-check-label">商品主类别</label>
								</div>
								<div class="form-check-inline">
									<input id="ctype2" type="radio" name="ctype" value="show" class="form-check-input" />
									<label for="ctype2" class="form-check-label">商品子类别</label>
								</div>
							</div>

							<div id="list-primary-category" class="collapse collapsed">
								<div class="form-group form-row">
									<label class="col-form-label pr-3 mr-2">父类别</label>
									<select class="col form-control">
										<option>女装/内衣</option>
										<option>男装/运动户外</option>
										<option>女鞋/男鞋/箱包</option>
										<option>手机/数码/电脑办公</option>
										<option>测试/测试</option>
									</select>
								</div>
							</div>

							<div class="form-group form-row">
								<label class="col-form-label pr-2">类别名称</label>
								<input type="text" class="col form-control" required="required" />
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-add-category" type="submit">新增商品类别</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //新增商品分类模态框部分结束 -->

		<!-- 编辑商品主类别模态框部分 -->
		<div id="modal-edit-primary-category" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-th-large"></i>
							<span>编辑商品主类别</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-edit-primary-category" action="">
							<div class="form-group form-row">
								<label class="col-form-label">类别名称</label>
								<input type="text" class="col form-control" required="required" value="男装/运动户外" />
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-edit-primary-category" type="submit">更新商品主类别</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //编辑商品主类别模态框部分结束 -->

		<!-- 编辑商品子类别模态框部分 -->
		<div id="modal-edit-category" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-th"></i>
							<span>编辑商品子类别</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-edit-category" action="">
							<div class="form-group form-row">
								<label class="col-form-label pr-3 mr-2">父类别</label>
								<select class="col form-control" required="required">
									<option>女装/内衣</option>
									<option selected="selected">男装/运动户外</option>
									<option>女鞋/男鞋/箱包</option>
									<option>手机/数码/电脑办公</option>
									<option>测试/测试</option>
								</select>
							</div>

							<div class="form-group form-row">
								<label class="col-form-label pr-2">类别名称</label>
								<input type="text" class="col form-control" required="required" value="单西" />
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-edit-category" type="submit">更新商品子类别</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //编辑商品子类别模态框部分结束 -->

		<!-- //页面主体部分结束 -->

		<!-- 页面脚部部分 -->
		<footer class="mt-2">
			<hr />
			<div class="container">
				<div class="row">
					<div class="col-sm my-2 d-flex justify-content-sm-end justify-content-center">
						<img src="../img/foot_img3.png" class="img-fluid rounded center-block" alt="">
					</div>
					<div class="col-sm my-2 d-flex justify-content-sm-start justify-content-center">
						<img src="../img/foot_img4.png" class="img-fluid rounded center-block" alt="">
					</div>
				</div>

				<div class="row">
					<div class="col text-center small text-muted">
						<div>Rights Reserved 免费服务热线: 400-800-0001 | 固话也可拨打: 800-000-0001 E-Mail: service@happygo.com</div>
						<div>湘ICP备10000001号 信息网络传播视听节目许可证号：1000001</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- //页面脚部部分结束 -->

	</body>

</html>
